<template>
	<view class="wrapper">
		<div class="header posf cfff" :style="{padding:`calc(10rpx + ${safeTop}px) 40rpx 20rpx 20rpx`}">
			<div class="flex-start">
				<div @click="back(1)" class="center">
					<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
				</div>
				<div class="bfff input-box center ml30">
					<u-icon name="search" color="#999" size="20"></u-icon>
					<input type="text" class="flex1 ml10 c333" placeholder="搜索影片" placeholder-class="c999 f20"
						v-model="keyWords" @confirm="getCinemas()" />
				</div>
			</div>
		</div>
		<div class="main" :style="{padding:`calc(100rpx + ${safeTop}px) 20rpx 25rpx`}">
			<reYing :reYinglist="reYinglist"></reYing>
		</div>
	</view>
</template>

<script>
	import reYing from '../dianYingYuan/components/reYing.vue'
	export default {
		data() {
			return {
				index: 0,
				reYinglist: [],
				keyWords: '',
				city: {},
				pageNum: 1,
				pageSize: 10
			};
		},
		components: {
			reYing
		},
		onLoad() {
			this.getCinemas()
		},
		onShareAppMessage: function () {
		    return {
		      title: '分享',
		      path: '/shouye/shouye?id=123'
		    }
		  },
		methods: {
			// 查询影院接口
			getCinemas() {
				this.$http('/api/queryMovies', {
					keyWords : this.keyWords 
				}).then((r) => {
					console.log(r)
					this.reYinglist = r.data
				})
			},
			click(e) {
				console.log(e.index)
				this.index = e.index
			}
		}
	}
</script>

<style lang="scss">
	.main {
		padding: 200rpx 20rpx 20rpx;
	}

	.header {
		width: 100%;
		padding: 25rpx 40rpx 0;
		background: linear-gradient(to left, #F857A5, #FF5858);
		top: 0;
		left: 0;
		z-index: 5;

		.input-box {
			width: 350rpx;
			height: 50rpx;
			border-radius: 25rpx;
			padding: 0 20rpx;
		}
	}
</style>